<h1>!{root.lang.__('module_name')}</h1>
<div class="uk-float-left uk-margin-bottom">
	<button class="uk-button uk-button-success uk-float-left" id="btn-add-item"><i class="uk-icon-plus"></i>
		<span class="uk-hidden-small">&nbsp;!{root.lang.__('add')}</span>
	</button>&nbsp;&nbsp;
	<div class="uk-button-group">
		<button class="uk-button" id="btn-select-all" data-uk-tooltip title="!{root.lang.__('select_all')}"><i class="uk-icon-square"></i>
		</button>
		<button class="uk-button" id="btn-select-none" data-uk-tooltip title="!{root.lang.__('select_none')}"><i class="uk-icon-square-o"></i>
		</button>
		<button class="uk-button uk-button-danger" id="btn-delete-selected"><i class="uk-icon-trash-o"></i>
			<span class="uk-hidden-small">&nbsp;!{root.lang.__('delete_selected')}</span>
		</button>
	</div>
</div>
<div class="uk-form uk-float-right">
	<div class="uk-form-icon"> <i class="uk-icon-search"></i>
		<input type="text" class="uk-form-width-medium" placeholder="!{root.lang.__('search_field')}" id="taracot_table_filter">
	</div>
</div>
<table class="uk-table uk-table-striped uk-table-hover taracot-data-table" id="taracot_table">
	<thead>
		<tr>
			<th style="width:100px" class="taracot_table_sortable" rel="taracot_table_sortable_username">!{root.lang.__('username')}
				<span class="taracot-sort-marker">&nbsp;<i class="uk-icon-sort-asc"></i>
				</span>
			</th>
			<th class="taracot_table_sortable" rel="taracot_table_sortable_realname">!{root.lang.__('realname')}</th>
			<th class="taracot_table_sortable" rel="taracot_table_sortable_email">!{root.lang.__('email')}</th>
			<th class="taracot_table_sortable" rel="taracot_table_sortable_status" style="width:82px;text-align:center">!{root.lang.__('status')}</th>
			<th style="width:102px;text-align:center">!{root.lang.__('actions')}</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<div class="taracot-loading uk-hidden uk-vertical-align uk-text-center">
	<div class="uk-vertical-align-middle">
		<img src="/modules/user/images/loading_36x36.gif" width="36" height="36" alt="">
	</div>
</div>
<div id="taracot_table_pagination"></div>
<div id="taracot-modal-edit" class="uk-modal">
	<div class="uk-modal-dialog">
		<div id="taracot-modal-edit-loading" class="uk-text-center">
			<img src="/modules/user/images/loading_36x36.gif" width="36" height="36" alt="">
		</div>
		<div id="taracot-modal-edit-loading-error" class="uk-alert uk-alert-danger">
			<a class="uk-modal-close uk-close"></a>!{root.lang.__('ajax_failed')}</div>
		<div id="taracot-modal-edit-wrap">
			<h1>
				<span id="taracot-modal-edit-h1-edit">!{root.lang.__('edit_user')}</span>
				<span id="taracot-modal-edit-h1-add" class="uk-hidden">!{root.lang.__('add')}</span>
			</h1>
			<form class="uk-form uk-form-stacked taracot-edit-form">
				<fieldset>
					<div class="uk-form-row">
						<label class="uk-form-label">!{root.lang.__('username')}:</label>
						<input class="uk-width-1-1" type="text" id="username">
					</div>
				</fieldset>
				<fieldset>
					<div class="uk-form-row">
						<label class="uk-form-label">!{root.lang.__('realname')}:</label>
						<input class="uk-width-1-1" type="text" id="realname">
					</div>
				</fieldset>
				<fieldset>
					<div class="uk-form-row">
						<label class="uk-form-label">!{root.lang.__('email')}:</label>
						<input class="uk-width-1-1" type="text" id="email">
					</div>
				</fieldset>
				<fieldset>
					<div class="uk-form-row">
						<label class="uk-form-label">!{root.lang.__('status')}:</label>
						<select id="status" class="uk-form-width-medium" id="status">
							<option value="0">!{root.lang.__('status_0')}</option>
							<option value="1">!{root.lang.__('status_1')}</option>
							<option value="2">!{root.lang.__('status_2')}</option>
						</select>
					</div>
				</fieldset>
				<fieldset>
					<div class="uk-form-row">
						<label class="uk-form-label">!{root.lang.__('groups')}:</label>
						<input class="uk-width-1-1" type="text" id="groups">
					</div>
				</fieldset>
				<fieldset>
					<div class="uk-form-row">
						<label class="uk-form-label">!{root.lang.__('password_twice')}:</label>
						<input class="uk-form-width-small" type="password" id="password">
						<input class="uk-form-width-small" type="password" id="password-repeat">
					</div>
				</fieldset>
			</form>
			<div class="taracot-buttons-area">
				<button class="uk-button" type="button" id="taracot-edit-btn-save">!{root.lang.__('save')}</button>&nbsp;
				<button class="uk-button uk-button-danger uk-modal-close" type="button">!{root.lang.__('cancel')}</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var _lang_vars = {
	ajax_failed: "!{root.lang.__('ajax_failed')}",
	form_err_title: "!{root.lang.__('form_err_title')}",
	form_err_msg: "!{root.lang.__('form_err_msg')}",
	delete_err_msg: "!{root.lang.__('delete_err_msg')}",
	status_0: "!{root.lang.__('status_0')}",
	status_1: "!{root.lang.__('status_1')}",
	status_2: "!{root.lang.__('status_2')}",
	del_confirm: "!{root.lang.__('delete_confirm')}",
	save_success: "!{root.lang.__('save_success')}",
	no_res: "!{root.lang.__('no_results_in_table')}"
};
</script>
<script src="/modules/user/js/user.min.js"></script>